.frame0{
    background-image: url(./images/loading-icon/loading0.png)
}
.frame1{
    background-image: url(./images/loading-icon/loading1.png)
}
.frame2{
    background-image: url(./images/loading-icon/loading2.png)
}
.frame3{
    background-image: url(./images/loading-icon/loading3.png)
}
.frame4{
    background-image: url(./images/loading-icon/loading4.png)
}
.frame5{
    background-image: url(./images/loading-icon/loading5.png)
}
.frame6{
    background-image: url(./images/loading-icon/loading6.png)
}
.frame7{
    background-image: url(./images/loading-icon/loading7.png)
}
.frame8{
    background-image: url(./images/loading-icon/loading8.png)
}
.frame9{
    background-image: url(./images/loading-icon/loading9.png)
}
.frame10{
    background-image: url(./images/loading-icon/loading10.png)
}
.frame11{
    background-image: url(./images/loading-icon/loading11.png)
}
.frame12{
    background-image: url(./images/loading-icon/loading12.png)
}
.frame13{
    background-image: url(./images/loading-icon/loading13.png)
}
.frame14{
    background-image: url(./images/loading-icon/loading14.png)
}
.frame15{
    background-image: url(./images/loading-icon/loading15.png)
}
.frame16{
    background-image: url(./images/loading-icon/loading16.png)
}
.frame17{
    background-image: url(./images/loading-icon/loading17.png)
}
.frame18{
    background-image: url(./images/loading-icon/loading18.png)
}
.frame19{
    background-image: url(./images/loading-icon/loading19.png)
}
.frame20{
    background-image: url(./images/loading-icon/loading20.png)
}
.frame21{
    background-image: url(./images/loading-icon/loading21.png)
}
.frame22{
    background-image: url(./images/loading-icon/loading22.png)
}
.loading-icon{
    width: 180px;
    height: 180px;
    /* background-size: 100% 100%; */
    background-position: 180px 0;
    background-image: url(../images/loadingSpirit.png);
    animation: 2s circle linear infinite;
    
}

/* .css3Supprot{
    animation: 1s loadingInconCircle linear infinite;
} */
/* .css3Supprot{
    animation: 1s test linear infinite;
  } */
/* @keyframes loadingInconCircle{
    0%{background-image: url(../src/images/loading-icon/loading0.png)}
    4.5%{background-image: url(../src/images/loading-icon/loading1.png)}
    9%{background-image: url(../src/images/loading-icon/loading2.png)}
    13.5%{background-image: url(../src/images/loading-icon/loading3.png)}
    18%{background-image: url(../src/images/loading-icon/loading4.png)}
    22.5%{background-image: url(../src/images/loading-icon/loading5.png)}
    27%{background-image: url(../src/images/loading-icon/loading6.png)}
    31.5%{background-image: url(../src/images/loading-icon/loading7.png)}
    36%{background-image: url(../src/images/loading-icon/loading8.png)}
    40.5%{background-image: url(../src/images/loading-icon/loading9.png)}
    44.5%{background-image: url(../src/images/loading-icon/loading10.png)}
    49%{background-image: url(../src/images/loading-icon/loading11.png)}
    53.5%{background-image: url(../src/images/loading-icon/loading12.png)}
    58%{background-image: url(../src/images/loading-icon/loading13.png)}
    62.5%{background-image: url(../src/images/loading-icon/loading14.png)}
    67%{background-image: url(../src/images/loading-icon/loading15.png)}
    71.5%{background-image: url(../src/images/loading-icon/loading16.png)}
    76%{background-image: url(../src/images/loading-icon/loading17.png)}
    80.5%{background-image: url(../src/images/loading-icon/loading18.png)}
    85%{background-image: url(../src/images/loading-icon/loading19.png)}
    90%{background-image: url(../src/images/loading-icon/loading20.png)}
    95%{background-image: url(../src/images/loading-icon/loading21.png)}
    100%{background-image: url(../src/images/loading-icon/loading22.png)}
} */